<template>
  <default-layout>
    <header-back text="档案借出" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">姓名：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借出档案的姓名'}]"
                  v-model="form.aac003"
                  ref="aac003"
                  placeholder="请填写借出档案的姓名"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">档案号：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借出的档案号'}]"
                  v-model="form.archiveCode"
                  ref="archiveCode"
                  placeholder="请填写档案号"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">身份证：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借出档案的身份证号'}]"
                  v-model="form.aac002"
                  ref="aac002"
                  placeholder="请填写借出档案的身份证号"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">借出单位：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借出单位'}]"
                  v-model="form.checkoutCorp"
                  ref="checkoutCorp"
                  placeholder="请填写借出单位"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">借出原因：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借出原因'}]"
                  v-model="form.checkoutReason"
                  ref="checkoutReason"
                  placeholder="请填写借出原因"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">借阅者姓名：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写借阅者姓名'}]"
                  v-model="form.checkoutPerson"
                  ref="checkoutPerson"
                  placeholder="请填写借阅者姓名"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">联系电话：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写联系电话'}, {reg: $regex.phone, msg: '请填写正确的手机号'}]"
                  v-model="form.mobilePhone"
                  ref="mobilePhone"
                  placeholder="请填写联系电话"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">借出日期：</span>
                <xf-date-picker
                  slot="right"
                  :valid="[{required: true, msg: '请选择借出日期'}]"
                  v-model="form.checkoutDate"
                  ref="checkoutDate"
                  :startDate="new Date()"
                  placeholder="请选择借出日期"></xf-date-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">借至日期：</span>
                <xf-date-picker
                  slot="right"
                  :valid="[{required: true, msg: '请选择借至日期'}]"
                  v-model="form.checkoutPeriodDate"
                  ref="checkoutPeriodDate"
                  :startDate="new Date()"
                  placeholder="请选择借至日期"></xf-date-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label">备注：</span>
                <yd-textarea
                  maxlength="100"
                  v-model.trim="form.remark"
                  placeholder="请填写备注"
                  slot="right"></yd-textarea>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label">材料：</span>
                <div class="img-right" slot="right">
                  <upload-image-group :max="5" file-name="材料" v-model="fileList" type="21"></upload-image-group>
                </div>
              </yd-cell-item>
              <div class="next">
                <div class="next">
                  <mt-button size="large" type="primary" @click="onSubmit">申请借出</mt-button>
                </div>
              </div>
            </yd-cell-group>
          </div>
        </div>
        <borrow-success v-if="status === 'success'" key="success"></borrow-success>
      </transition>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import BorrowSuccess from './success.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import UploadImageGroup from '../../../components/upload-image-group/upload-image-group'
  import {validate, arrToForm} from '../../../common/js/util'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      UploadImageGroup,
      DefaultLayout,
      BorrowSuccess,
      XfDatePicker,
      XfInput,
      HeaderBack},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          aac003: '', // 姓名
          archiveCode: '', // 档案号
          aac002: '', // 身份证号
          checkoutCorp: '', // 借出单位
          checkoutReason: '', // 借出原因
          checkoutPerson: '', // 借阅者姓名
          mobilePhone: '', // 联系电话
          checkoutDate: '', // 借出日期
          checkoutPeriodDate: '', // 借至日期
          remark: '', // 备注
          attachmentList: '' // 文件列表
        },
        status: 'form',
        fileList: []
      }
    },
    methods: {
      onSubmit() {
        validate.call(this, this.form).then(() => {
          const form = Object.assign({}, this.form, arrToForm(this.fileList, 'attachmentList'))
          this.$post('/admin/person/sapi/personal/records/file/save/loan/apply', form, loading => { this.$message.loading(loading) }).then(res => {
            this.status = 'success'
          })
        })
      }
    },
    created() {
      this.form.mobilePhone = this.userInfo.aae005
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .form-list{
    margin: 0 0 .2rem 0;
  }
  .file{
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .img-right{
    display: flex;
    align-items: center;
    padding: .2rem 0;
    width: 100%;
    .img-box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 .2rem;
      .upload-img,img{
        width: 2rem;
      }
      span{
        margin: .15rem 0 0 0;
      }
    }
  }
</style>
